<template>
    <div class="indexcenterbox">
        <loading v-show="xianshi" class="aaa"></loading>
        <div v-show="!xianshi">
            <ul class="myicon">
                <li>
                    <router-link :to="{path:'/play'}">
                        <div class="iconsvg">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-yinle"></use>
                            </svg>
                        </div>
                        <p>歌手</p>
                    </router-link>
                </li>
                <li>
                    <router-link :to="{path:'/circle'}">
                        <div class="iconsvg">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-paihang"></use>
                            </svg>
                        </div>
                        <p>排行</p>
                    </router-link>
                </li>
                <li>
                    <!-- <router-link :to="{path:'/songlist',query:{id:item.id}}"> -->
                        <div class="iconsvg">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-shouyediqiu"></use>
                            </svg>
                        </div>
                        <p>圈子</p>
                    <!-- </router-link> -->
                </li>
                <li>
                    <!-- <router-link :to="{path:'/songlist',query:{id:item.id}}"> -->
                        <div class="iconsvg">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-huodong"></use>
                            </svg>
                        </div>
                        <p>活动</p>
                    <!-- </router-link> -->
                </li>
            </ul>
            <div class="mymokuai" @click="xgsd">
                <div class="indexleft playdingwei">
                    <div class="mokuaititle">歌曲推荐</div>
                    <div class="mokuaixq">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-24gf-play"></use>
                        </svg>
                    </div>
                    <div>
                        <p class="gequ" v-for="item in newsongarr" :key="item.name">{{item.song}}-{{item.name}}</p>
                    </div>
                </div>
                <div class="indexright">
                    <div class="righttop playdingwei">
                        <div class="rttitle">新歌推荐</div>
                        <div class="mokuaixq">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-24gf-play"></use>
                            </svg>
                        </div>
                        <div>
                            <p class="gequ sudi" v-for="item in sudisongarr" :key="item.name">{{item.song}}-{{item.name}}</p>
                        </div>
                    </div>
                    <div class="rightdown">随心FM</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import loading from "../small/loading.vue"
import { myiconarr } from "../other/other.js"
export default {
    name:"indexcenter",
    components:{
        loading
    },
    data(){
        return {
            xianshi:true,
            myiconarr,
            newsongarr:[],
            sudisongarr:[]
        }
    },
    created(){
        if(sessionStorage.getItem("index") == null){
            this.getdata()
        }else{
            // console.log(111)
            let arr = JSON.parse(sessionStorage.getItem("index"))
            this.newsongarr = arr[0]
            this.sudisongarr = arr[1]
            this.xianshi = false
        }
    },
    methods:{
        getdata(){
            axios.get('https://apis.netstart.cn/music/top/song?type=7').then(
                res=>{
                    console.log(res)
                    let newres = res.data.data.slice(0,3)
                    let newres1 = res.data.data.slice(4,6)
                    for(let i = 0;i<newres.length;i++){
                        let obj = {}
                        obj.name = newres[i].artists[0].name
                        obj.song = newres[i].name
                        this.newsongarr.push(obj)
                    }
                    for(let i = 0;i<newres1.length;i++){
                        let obj1 = {}
                        obj1.name = newres1[i].artists[0].name
                        obj1.song = newres1[i].name
                        this.sudisongarr.push(obj1)
                    }
                    let arr = []
                    arr.push(this.newsongarr)
                    arr.push(this.sudisongarr)
                    let arr1 = JSON.stringify(arr)
                    sessionStorage.setItem("index",arr1)
                    this.xianshi = false
                },
                err=>{
                    console.log(err)
                }
            )
        },
        xgsd(){
            this.$router.push({path:"/newsong"})
        }
    }
}
</script>
<style lang="less" scoped>
a{
    text-decoration: none;
    -webkit-tap-highlight-color:transparent;
}
ul,li{
    margin: 0;
    padding: 0;
    list-style: none;
}
.myicon{
    display:flex;
    justify-content: space-between;
    padding: 30px;
    .iconsvg{
        text-align: center;
        position: relative;
        svg{
            font-size: 2rem;
            color:#4475b7;
        }
        &::after{
            content: "";
            position: absolute;
            top: 10%;
            right: 16%;
            width: 1.5rem;
            height: 1.5rem;
            border-radius: 50%;
            background-color: #64a6ff54;
        }
    }
    p{
        text-align: center;
        margin: 0;
        margin-top: 10px;
        font-weight: 600;
        color:#4476b7e1;
    }
}
.mymokuai{
    width: 85%;
    height: 150px;
    margin: 0 auto; 
    display: flex;
    justify-content: space-between;
}
.indexleft{
    width: 50%;
    height: 100%;
    border-radius: 8px;
    background: linear-gradient(200deg, #cfe8f7, #58b2ff);
    position: relative;
    .mokuaititle{
        width: 50px;
        font-size: 1.5rem;
        margin: 10px 15px 27px;
        color: white;
        font-family: "YouYuan";
        font-weight: 700;
    }
}
.indexright{
    width: 48%;
    height:100%;
    .righttop{
        position: relative;
        border-radius: 8px;
        height: 60%;
        background-image: linear-gradient(54deg, #78e198, #aaecca);
        padding: 5px;
        .rttitle{
            font-size: 1.2rem;
            margin: 10px 10px 25px;
            color: white;
            font-family: "YouYuan";
            font-weight: 700;
        }
    }
    .rightdown{
        border-radius: 8px;
        background: linear-gradient(63deg, #f4e94c, #f4f193);
        height: 30%;
        margin-top: 3%;
        padding-left: 15px;
        padding-top: 7%;
        box-sizing: border-box;
        color: white;
        font-family: "YouYuan";
        font-weight: 700;
        font-size: 1.2rem;
    }
}
.mokuaixq{
    width: 2rem;
    position: absolute;
    height: 2rem;
    top: 10%;
    right: 7.5%;
    line-height: 2rem;
    text-align: center;
    border-radius: 50%;
    background-color: #ffffff59;
    svg{
        color:white;
        font-size: 1rem;
    }
}
.gequ{
    width: 70%;
    font-size: 0.8rem;
    margin: 2px;
    color: white;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-left:15px;
}
.sudi{
    padding-left:10px;
    margin: 1px;
    font-size: 0.6rem;

}
.aaa{
    width: 100%;
    margin-top:50px;
    height: 30px;
}
</style>